@charset "utf-8";
@import "reset";

body {
    .web {
        header {
            position:fixed;
            display: flex;
            width: 100vw;
            background-color: #fff;
            z-index: 99;
            .search {
                margin-left: 3.7333vw;
                margin-top: 3.7333vw;
                margin-bottom: 4vw;
                width: 5.6vw;
                height: 5.6vw;
                .icon {
                    font-size: 6.3333vw;
                }
                // img {
                //     width:100%;
                //     height:100%;
                // }
            }
            .logo {
                // margin: 2.5413vw 0 2.5413vw;
                margin-left: 33.6vw;
                align-self: center;
                img {
                    width: 20vw;
                    // height: 8.2507vw;
                }
            }
        }
        main {
            background-color: #F6F6F6;
            // position: relative;
            &::before {
                content:"";
                display: block;
                height: 13.3333vw;
            }
            .top-banner {
                .rotation-chart {
                    position: relative;
                    width: 100vw;
                    height: 54.6667vw;
                    img {
                        position: absolute;
                        top: 0vw;
                        left: 0vw;
                        width: 100%;
                        height: 100%;
                    }
                    ul {
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        bottom: 2.1333vw;
                        li {
                            display: inline-block;
                            margin-right: 2.6667vw;
                            width: 1.6vw;
                            height: 1.6vw;
                            border-radius: 1.6vw;
                            background-color: #FFAFB2;
                            &.active {
                                width: 5.3333vw;
                                background-color: #884E22;
                            }
                        }
                    }
                }
            }
            // 好评栏
            .best-banner {
                background-color: #fff;
                ul {
                    display: flex;
                    justify-content: space-evenly;
                    li {
                        margin: 1.8667vw 0;
                        height: 4.5333vw;
                        font-size: 3.2vw;
                        color: #555;
                        line-height: 4.5333vw;
                        img {
                            width: 3.4667vw;
                            height: 3.7333vw;
                        }
                    }
                }
            }
            // 导航栏
            nav {
                background-color: #fff;
                ul {
                    display: flex;
                    // border: .2667vw solid red;
                    justify-content: space-around;
                    li {
                        margin: 3.2vw 0 2.9333vw;
                        font-size: 3.7333vw;
                        color: #333;
                        text-align: center;
                        img {
                            margin-bottom: 1.6vw;
                            width: 10.6667vw;
                            height: 10.6667vw;
                        }
                    }
                }
            }
            // 一秒选花
            .one-second {
                // border: .2667vw solid red;
                margin-top: 2.1333vw;
                padding: 2.6667vw 2.6667vw;
                background-color: #fff;
                h5 {
                    margin: 0 auto;
                    width: 94.6667vw;
                    font-size: 4vw;
                    font-weight: 500;
                    color: #884E22;
                    text-indent: 3.2vw;
                    border-left: .5333vw solid #884E22;
                }
                .img-nav {
                    // border: .2667vw solid red;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    li {
                        margin-top: 2.6667vw;
                        &:nth-child(-n+3) {
                            width: 29.6vw;
                            height: 33.3333vw;
                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                        &:nth-child(n+4) {
                            width: 22.6667vw;
                            height: 28.2667vw;
                            text-align: center;
                            background-color: #F3EBE3;
                            border-radius: 1.3333vw;
                            h6 {
                                margin: 2.9333vw 0 1.8667vw;
                                font-size: 3.7333vw;
                                font-weight: 600;
                                color: #884E22;
                            }
                            img {
                                width: 18.1333vw;
                                height: 18.1333vw;
                            }
                        }
                    }
                }
            }

            // 鲜花主题列表
            .topic-list {
                // border: .2667vw solid red;
                margin-top: 2.6667vw;
                padding: 4vw 0;
                background-color: #fff;
                .title {
                    height: 8vw;
                    h3 {
                        position: relative;
                        margin: 3.4667vw auto 1.3333vw;
                        width: 21.3333vw;
                        height: 100%;
                        font-size: 4vw;
                        font-weight: 600;
                        color: #555555;
                        text-align: center;
                        line-height: 8vw;
                        &:after {
                            content:"";
                            display: block;
                            position: absolute;
                            left:0;
                            // bottom: 0;
                            width: 100%;
                            height: 1.0667vw;
                            background-color: #884E22;
                            // border: .5333vw solid #884E22;
                            border-radius: .5333vw;
                        }
                    }
                }
                // 鲜花列表
                .flower-list {
                    // border: .2667vw solid red;
                    margin-top: 2.6667vw;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-evenly;
                    ul {
                        margin-top: 4vw;
                        li {
                            &:first-child {
                                width: 44vw;
                                height: 44vw;
                                img {
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                            &:nth-child(2) {
                                margin: 1.3333vw 0;
                                height: 5.3333vw;
                                font-size: 3.7333vw;
                                color: #666;
                                line-height: 5.3333vw;
                            }
                            &:nth-child(3) {
                                display: flex;
                                justify-content: space-between;
                                align-items: baseline;
                                height: 5.3333vw;
                                .price {
                                    font-size: 3.7333vw;
                                    font-weight: 600;
                                    color: #FF4433;
                                    line-height: 5.3333vw;
                                }
                                .sales-volume {
                                    font-size: 3.2vw;
                                    font-weight: 400;
                                    color: #999;
                                }
                            }
                        }
                    }
                }
                // 查看更多
                .look-more {
                    margin-top: 5.3333vw;
                    a {
                        display: block;
                        margin: 0 auto;
                        width: 18.6667vw;
                        height: 7.2vw;
                        border: 1px solid #999f;
                        font-size: 3.2vw;
                        font-weight: 400;
                        color: #999;
                        text-align: center;
                        line-height: 7.2vw;
                        text-decoration: none;
                    }
                }
            }
            // 版权信息
            .copyright {
                margin-top: 2.6667vw;
                height: 21.3333vw;
                margin-bottom: 13.6vw;
                background-color: #fff;
                overflow: hidden;
                // border: .2667vw solid red;
                p {
                    margin-top: 6.6667vw;
                    font-size: 3.2vw;
                    color: #999;
                    text-align: center;
                    line-height: 5.3333vw;
                }
            }
        }
        .tabbar {
            position: fixed;
            bottom: 0;
            left: 0;
            height: 13.6vw;
            background-color: #f9f9f9;
            ul {
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                padding: 0 4vw 0 2.6667vw;
                width: 100vw;
                height: 100%;
                li {
                    text-align: center;
                    img {
                        width: 5.8667vw;
                        height: 7.2vw;
                    }
                    .icon {
                        font-size: 7.3333vw;
                    }
                    p {
                        font-size: 3.2vw;
                        font-weight: 400;
                        color: #333;
                        &.index {
                            color: #000;
                        }
                        &.active {
                            color: #884E22;
                        }
                    }
                }
            }
        }
    }
}